<template>
    <div>
        <Row :gutter="10" class="margin-top-10">
            <Card>
                 <Row>
                     <Input v-model="modelName" placeholder="请输入流程名称" style="width: 200px"/>
                     <Button @click="handleRead" type="primary" icon="search">搜索</Button>
                     <Button @click="handleAdd">新增流程</Button>
                     <modalForm :show="show">
                         <div  slot="header" style="color:#f60;text-align:center;" >
                             <span>新增流程</span>
                         </div>
                         <modelAdd slot="body"></modelAdd>
                     </modalForm>
                 </Row>


                <Row class="margin-top-10 searchable-table-con1">
                    <Table border  refs="models" :data="records" @on-delete="handleDelete" :columns="columns"></Table>
                </Row>
                <Row class="margin-top-10 searchable-table-con1">
                    <Page :total="totalCount" :page-size="size" show-total @on-change="changePage"></Page>
                </Row>
            </Card>
        </Row>
        <Row :gutter="10" class="margin-top-10">
            <processDefines></processDefines>
        </Row>
    </div>
</template>

<script type="text/ecmascript-6">
    import api  from '../../libs/api'
    import util from "../../libs/util"
    import processDefines from "./process-defines.vue"
    import modelAdd from "./model_add.vue"
    import modalForm from "../my-components/modal-form/modalForm.vue"
    import {eventBus}  from '../../libs/eventBus'
    export default {
        name: 'model',
        components: {
            processDefines,
            modelAdd,
            modalForm
        },
        data () {
            return {
                records: [],
                current: 1,
                size: 10,
                show:false,
                templates:[], //表单列表
                modelName:"",
                totalCount: 0,
                totalPage: 0,
                columns: [
                    {
                        title: '流程名称',
                        key: 'name'
                    },
                    {
                        title: '流程定义key',
                        key: 'key'
                    },
                    {
                        title: '流程定义Id',
                        key: 'actDefId'
                    },
                    {
                        title: '版本',
                        key: 'version',
                        width:100,
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 300,
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                           util.openUrl(api.baseURL+api.activity.view.replace("{id}",params.row.actModelId));
                                        }
                                    }
                                }, '设计流程'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleRelateFormTemplate(params.row);
                                        }
                                    }
                                }, '保存'),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '您确定要发布该模型并且启动该流程?',
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.handleDeploy(params.row.id);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        style: {
                                            margin: '0 5px'
                                        },
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        }

                                    }, '发布启动')
                                ]),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '您确定要删除这条数据吗?',
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.handleDelete(params.row.id);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        style: {
                                            margin: '0 5px'
                                        },
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        }

                                    }, '删除')
                                ])
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
            handleRead(){
                let data = {};
                data.modelName=this.modelName;
                data.current = this.current;
                data.size = this.size;
                this.$get(api.activity.models.base, data).then(response => {
                    this.totalPage = this.util.calTotalPage(response.obj.total, this.size);
                    this.totalCount = response.obj.total;
                    this.records = [];
                    for (let i in response.obj.records) {
                        this.records.push(response.obj.records[i])
                    }
                });
            },
            handleAdd: function() {
                this.show=true;
            },
            handleDelete (modelId) {
                this.$delete(api.activity.models.base+"/"+modelId,null).then(response=>{
                    this.handleRead();
                });
            },
            handleDeploy(modelId){
                this.$post(api.activity.models.deploy.replace("{id}",modelId),null).then(response=>{
                    this.handleRead();
                });
            },
            changePage(index){
                this.current = index;
                this.handleRead();
            },
            handleTemplates(){
                this.templates=[];
                this.$get(api.activity.templates,{}).then(response=> {
                    this.templates=response.obj;
                });
            },
            //关联表单
            handleRelateFormTemplate(data){
                this.$post(api.activity.templates+"/"+data.templateId,data).then(response=>{
                    response.code==200&&this.handleRead();
                });
            }
        },
        created(){
            this.handleRead();
            this.handleTemplates();
        },
        mounted(){
            let self=this;
            eventBus.$on("freshenModelList",function () {
                self.handleRead();
            });
            eventBus.$on("closeModal",function () {
                self.show=false;
            })
        }
    }
</script>

<style>

</style>
